<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <script th:src="@{/js/jquery.min.js}" src="jquery.min.js"></script>
    <script th:src="@{/js/bootstrap.min.js}" src="bootstrap.min.js"></script>
    <script th:src="@{/bootstrap-table/src/bootstrap-table.js}" ></script>
    <script th:src="@{/bootstrap-table/src/locale/bootstrap-table-zh-CN.js}" ></script>
    <link rel="stylesheet"  th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet"  th:href="@{/bootstrap-table/src/bootstrap-table.css}">
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
<table id="table"></table>

</body>
<script type="text/javascript">
    $(function () {

         $("#table").bootstrapTable({
             //极为重要，缺失无法执行queryParams，传递page参数
            contentType : "application/x-www-form-urlencoded",
            url: '/user/userJson',
            method: 'get',
            dataType: "json",
            striped: true,//设置为 true 会有隔行变色效果
            undefinedText: "空",//当数据为 undefined 时显示的字符
            pagination: true, //分页
            // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
            showToggle: "true",//是否显示 切换试图（table/card）按钮
            showColumns: "true",//是否显示 内容列下拉框
            pageNumber: 1,//如果设置了分页，首页页码
            // showPaginationSwitch:true,//是否显示 数据条数选择框
            pageSize: 5,//如果设置了分页，页面数据条数
            pageList: [5, 10, 20, 40],	//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
            paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
            // singleSelect: false,//设置True 将禁止多选
            search: false, //显示搜索框
            data_local: "zh-US",//表格汉化
            //分页方式：client客户端分页，server服务端分页（*）
            sidePagination: "server", //服务端处理分页
            //是否启用排序
            sortable: false,
            //排序方式
            sortOrder: "asc",
            showRefresh:"true",//刷新按钮
            queryParamsType:'',//queryParamsType的默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
             //设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber */
             responseHandler:function(res){
                 //在ajax获取到数据，渲染表格之前，修改数据源
                 var nres = [];
                 nres.push({total:res.total,rows:res.list});
                 return nres[0];
             },
            queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
                return {//这里的params是table提供的
                    currentPage:params.pageNumber,
                    pageSize:params.pageSize
                };
            },
            idField: "id",//指定主键列
            columns: [
                {
                    title: 'ID',//表的列名
                    field: 'id',//json数据中rows数组中的属性名
                    align: 'center'//水平居中
                },
                {
                    title: '账号',
                    field: 'username',
                    align: 'center'
                },
                {
                    title: '真实姓名',
                    field: 'name',
                    align: 'center'
                },


                {
                    title: '状态',
                    field: 'state',
                    align: 'center',
                    formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
                        return row.state == 0 ? "正常" : row.state == 1 ? "请假" : "离职";
                    }

                },
                {
                    title: '操作',
                    field: '',
                    align: 'center',
                    formatter: function (value, row, index) {//自定义显示，这三个参数分别是：value该行的属性，row该行记录，index该行下标
                        return [
                            '<button id="bind" type="button" class="btn btn-default">绑定</button>',
                            '<button id="unbind" type="button" class="btn btn-default">解绑</button>',
                        ].join('');
                    }
                },



            ]
        });




    });
</script>

</html>